<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>表单设计器</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
</head>
<body>

<div class="layui-container">
    <fieldset class="layui-elem-field">
        <legend>字段集区块 - 默认风格</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane" action="">
                <div id="formdesigner"></div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.config(
        {base: './modules/'}
    ).use(['layer', 'form', 'formDesigner'], function () {
        var formDesigner = layui.formDesigner
            , layer = layui.layer
            , form = layui.form;
        if (window.localStorage.getItem('layui_form_json') !== undefined) {
            var demojs = JSON.parse(window.localStorage.getItem('layui_form_json'));
            var values = {
                name: '张鹏',
                description: '使用说明文本',
                label: '3',
                status: '1',
                gender: '2',
                hobby: '1,3',
                create_time: '2021-08-10',
                remark: '备注一下',
                progress: '25',
                score: 4,
                portrait: './2014111009185883.jpg',
                enclosure: ',../image/login_bg.jpg,../image/login_bg_01.jpg',
                carousel: '../image/d4c17f1d-8a65-43d6-a248-48feb2c0ac09.png,../image/fc45a7b7-b89f-4188-93cf-3c9f0ac39a78.png',
                content: '文章详情',
            };
            formDesigner.renderComponent('#formdesigner', demojs, values);
        }

        form.on('submit(formDemo)', function (data) {
            console.log(data.field);
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>